<template>
  <div>
      <!-- 左侧菜单采用NavMenu组件的第二个侧栏de自定义颜色的那个，并且所有的逻辑或递归代码都在该文件组件中写所以需要导入选项类别数据源和递归的那部分，需要唯一一个自己写的样式为了去除.el-menu1像素的border-rigth要!important -->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      router
    >
    <!-- 递归子菜单的那部分 -->
      <EL_menu_item :menu="menu"></EL_menu_item>
    </el-menu>
  </div>
</template>

<script>
    // 导入左侧菜单栏数据
    import {menuroutes} from "@/router/routes.js"
    // 导入无限极选项EL_menu_item
    import EL_menu_item from "./EL_menu_item.vue";

    export default {
        components: {
            EL_menu_item
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            filter_hidden_and_digui_routes(routes, path) {
                let filter_arr = [];
                routes.forEach(item => {
                    if (item.meta.hidden) {
                        if (item.meta.hidden === true) {
                            let temp_up_arr = this.filter_hidden_and_digui_routes(item.children, item.path)
                            filter_arr = filter_arr.concat(temp_up_arr)
                        } else {
                            //没有等于flase不处理
                        }
                    } else {
                        if (path) {
                            if (path == '/') {
                                item.path = path + item.path
                            } else {
                                item.path = path + '/' + item.path
                            }
                        }
                        // else {
                        //     // item.path = path + item.path
                        // }
                        if (item.children) {
                            item.children = this.filter_hidden_and_digui_routes(item.children, item.path)
                        }
                        filter_arr.push(item)
                    }
                })
                return filter_arr
            }
        },
        computed: {
            menu: function() {
                return this.filter_hidden_and_digui_routes(menuroutes, '')
            }
        }
    };
</script>

<style>
    .el-menu {
        border-right: solid 0px #e6e6e6 !important;
    }
</style>